<template>
    <div class="slideshow">
        <n-carousel show-arrow autoplay effect="custom" :transition-props="{ name: 'creative' }">
            <img class="carousel-img" :src="data.fileList.url" v-if="data.fileList?.url"/>
            <img class="carousel-img" src="http://bpm.eletile.com:33037/UI2/banner/AF2.jpg">
            <img class="carousel-img" src="http://bpm.eletile.com:33037/UI2/banner/9.jpg">
            <img class="carousel-img" src="http://bpm.eletile.com:33037/UI2/banner/AF1.jpg">
            <img class="carousel-img" src="https://bjdnlsj.oss-cn-beijing.aliyuncs.com/loginBg.jpg">
        </n-carousel>
    </div>
</template>

<script setup>
import { NCarousel } from 'naive-ui'
import homeApi from "@/api/home.js";// 获取上传的文件信息
import { onMounted, reactive } from 'vue';

const data=reactive({
    fileList:''
})
onMounted(()=>{
    flieShowList()
})
const flieShowList = () => {
    homeApi.getFileList2('', 'wflow-carousel').then(res => {
        res.data.records.forEach(element => {
            element.checked = false
        });
        data.fileList = res.data.records[0]
        console.log( data.fileList)
    })
}
</script>

<style scoped lang="less">
.slideshow {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:deep(.creative-enter-from),
:deep(.creative-leave-to) {
    opacity: 0;
    transform: scale(0.8);
}

:deep(.creative-enter-active),
:deep(.creative-leave-active) {
    transition: all 0.3s ease;
}
</style>
